<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import {
  deleteCdnClusterApi,
  getCdnClusterListApi,
  getCdnClusterNodeListApi,
  getCdnClusterSiteListApi,
  updateCdnClusterStatusApi,
} from '@/apis/modules/cdn'
import { commonTableProps } from '@/utils/table'
import usePopupPreGetData from '@/views/cdn/node/node-list/hooks/usePopupPreGetData'
import EditorDialog from './dialogs/EditorDialog.vue'
import NodeDetails from './dialogs/NodeDetails.vue'
import SiteDetails from './dialogs/SiteDetails.vue'
import useConfig from './useConfig'

const { tableColumns } = useConfig()

const queryParams = ref({ name_keyword: '' })

const {
  loading,
  data: tableData,
  pagination,
  run,
} = useListRequest(getCdnClusterListApi, {
  params: queryParams,
  immediate: true,
})

const {
  visible: editorDialogVisible,
  open: openEditorDialog,
  data: editorDialogData,
} = usePopup()

const {
  visible: nodeVisible,
  open: openNode,
  data: nodeData,
  loading: nodeLoading,
  record: nodeRecord,
  pagination: nodePagination,
  run: nodeRun,
} = usePopupPreGetData(getCdnClusterNodeListApi)

const {
  visible: siteVisible,
  open: openSite,
  data: siteData,
  loading: siteLoading,
  record: siteRecord,
  pagination: sitePagination,
  run: siteRun,
} = usePopupPreGetData(getCdnClusterSiteListApi)

// 删除
function handleDelete(id: string) {
  ModalHelper.error({
    title: '删除集群',
    content: '确定要删除该集群吗？集群内的节点将会迁移到启用集群中。',
    okText: '删除',
    width: 480,
    closable: false,
    onOk: async () => {
      await deleteCdnClusterApi({ id })
      await run()
      Message.success('删除成功')
    },
  })
}

function handleBeforeChange(row: any, status: 1 | 2) {
  return updateCdnClusterStatusApi({ id: row.id!, status }).then(() => {
    Message.success('操作成功')
    row.status = status
    run()
  })
}

const { createSortChange } = useTable(run, tableData)
const onSorterChange = createSortChange(queryParams)
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <div class="flex space-x-4">
        <a-button
          type="primary"
          @click="openEditorDialog()"
        >
          新建集群
        </a-button>
        <a-input-search
          v-model="queryParams.name_keyword"
          placeholder="请输入集群名称搜索"
          class="!w-58"
          @change="run"
          @click="run"
        />
        <!-- <multiple-condition-search
          v-model="queryParams"
          :schema="searchSchema"
          @search="run"
        /> -->
      </div>
    </template>

    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="tableData"
      @sorter-change="onSorterChange"
    >
      <template #node_count="{ record }">
        <div class="flex items-center gap-x-1 leading-5">
          {{ record.node_count }}
          <a-tooltip
            content="关联节点"
            :show-arrow="false"
          >
            <!-- <i-icons-base-info
              class="cursor-pointer text-7 hover:text-2"
              @click="openNode(record)"
            /> -->
            <i-icons-base-info
              class="table-icon"
              size="16px"
              @click="openNode(record)"
            />
          </a-tooltip>
        </div>
      </template>
      <template #status="{ record }">
        <a-switch
          :model-value="record.status"
          :checked-value="1"
          :unchecked-value="2"
          size="small"
          :disabled="record.status === 1"
          handle-before-change
          :before-change="val => handleBeforeChange(record, val as 1 | 2)"
        />
      </template>
      <template #site_count="{ record }">
        <div class="flex items-center gap-x-1 leading-5">
          {{ record.site_count }}
          <a-tooltip
            content="关联站点"
            :show-arrow="false"
          >
            <!-- <i-icons-base-info
              class="cursor-pointer text-7 hover:text-2"
              @click="openSite(record)"
            /> -->
            <i-icons-base-info
              class="table-icon"
              size="16px"
              @click="openSite(record)"
            />
            <!-- <a-link @click="openSite(record)">
              详情
            </a-link> -->
          </a-tooltip>
        </div>
      </template>
      <template #actions="{ record }">
        <a-link
          :hoverable="false"
          @click="openEditorDialog(record)"
        >
          <i-icons-edit size="16px" />
        </a-link>
        <a-link
          :hoverable="false"
          :disabled="record.status === 1"
          status="danger"
          @click="handleDelete(record.id)"
        >
          <i-icons-delete size="16px" />
        </a-link>
      </template>
    </a-table>
  </main-container>

  <editor-dialog
    v-if="editorDialogVisible"
    v-model:visible="editorDialogVisible"
    :record="editorDialogData"
    @reload="run"
  />
  <node-details
    v-if="nodeVisible"
    v-model:visible="nodeVisible"
    v-model:data="nodeData"
    v-model:pagination="nodePagination"
    :record="nodeRecord"
    :loading="nodeLoading"
    :run="nodeRun"
  />
  <site-details
    v-if="siteVisible"
    v-model:visible="siteVisible"
    v-model:data="siteData"
    v-model:pagination="sitePagination"
    :record="siteRecord"
    :loading="siteLoading"
    :run="siteRun"
  />
</template>

<style scoped>
:deep(.arco-table-tr) {
  .table-icon {
    opacity: 0;
    color: var(--color-text-7);
    cursor: pointer;
  }

  &:hover {
    .table-copy-text {
      @apply text-primary;
    }

    .table-icon {
      opacity: 1;
      color: #00a65b;
    }
  }
}
</style>
